<template>
  <div class="theme-content-item" style="position: relative;">
    <div class="padding-20px form-style">
      <div class="left-title">{{ title }}</div>
      <el-form ref="examFlowFormRef" label-width="120px" :model="form" :rules="rules"
        style="margin-top: 40px">
        <el-row style="display: flex;justify-content:start">
          <el-col :span="10">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="排序" prop="orderNum">
              <el-input type="number" v-model="form.orderNum" placeholder="请输入排序号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="副标题" prop="subTitle">
              <el-input v-model="form.subTitle" placeholder="请输入副标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="所属课程" prop="courseTypeList">
              <el-select clearable v-model="form.courseTypeList" placeholder="请选择课程" multiple :collapse-tags="true" :collapse-tags-tooltip="true">
                <el-option v-for="item in data.courseList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="所属地区" prop="provinceIdList">
              <el-select clearable v-model="form.provinceIdList" placeholder="请选择区域" multiple :collapse-tags="true" :collapse-tags-tooltip="true">
                <el-option :key="'select-all'" :label="'全选'" :value="null" @click.stop="toggleSelectAll"/>
                <el-option v-for="item in data.areaList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="关联资讯" prop="articleIdList">
              <el-select clearable v-model="form.articleIdList" placeholder="请选择资讯" multiple :collapse-tags="true" :collapse-tags-tooltip="true">
                <el-option v-for="item in data.articleList" :key="item.id" :label="item.title" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="状态" prop="publishedFlag">
              <el-radio v-model="form.publishedFlag" :label="1">上架</el-radio>
              <el-radio v-model="form.publishedFlag" :label="0">下架</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style=" position: fixed; bottom: 5%; left: 45%" class="flex-jc-s-b">
        <el-button size="small" @click="goBack()">
          <svg-icon icon-class="back" class="el-input__icon input-icon" />
          <span style="margin-left: 5px;">关 闭</span>
        </el-button>
        <el-button size="small" style="margin-left: 20px;" type="primary" @click="save">
          <svg-icon icon-class="save" class="el-input__icon input-icon" />
          <span style="margin-left: 5px;">保 存</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import {addExamFlow, editExamFlow, getExamFlowDetail} from '@/api/config/exam-flow'
import {listDictItemByCode} from '@/api/config/dic'
import {listArticle} from '@/api/article/article'
import {pagingArticle} from '../../../../api/article/article'
const { proxy } = getCurrentInstance();
const route = useRoute()
const router = useRouter()
const routeQuery = reactive(route.query)
const title = ref('');
const isAdd = ref(false);
const data = reactive({
  courseList: [],
  areaList: [],
  articleList: [],
})
const form = reactive({
  id: null,
  name: '',
  orderNum: '',
  subTitle: '',
  courseTypeList: [],
  provinceIdList: [],
  articleIdList: [],
  publishedFlag: 1,
})

const rules = ({
  name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  orderNum: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
  subTitle: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  publishedFlag: [{ required: true, message: '请选择状态', trigger: 'blur' }],
  courseTypeList: [{ required: true, message: '请选择课程', trigger: 'blur' }],
  provinceIdList: [{ required: true, message: '请选择地区', trigger: 'blur' }],
  articleIdList: [{ required: true, message: '请选择资讯', trigger: 'blur' }],
})
const toggleSelectAll = () => {
  if (form.provinceIdList.length-1 === data.areaList.length) {
    form.provinceIdList = [];
  } else {
    form.provinceIdList = data.areaList.map(option => option.id);
  }
};
// 详情
const initDetail = (row) => {
  getExamFlowDetail(row.id || route.query.id).then((res) => {
    let resData = res.data
    Object.keys(form).forEach((key) => { form[`${key}`] = resData[`${key}`] })
    form.courseTypeList = []
    form.provinceIdList = []
    form.articleIdList = []
    resData.courseTypeMap.map(item => {
      form.courseTypeList.push(item.id)
    })
    resData.provinceMap.map(item => {
      form.provinceIdList.push(item.id)
    })
    resData.articleMap.map(item => {
      form.articleIdList.push(item.id)
    })
  })
}
const initData = () => {
  listDictItemByCode({typeCode: 'courseTypeCode'}).then(res => {
    data.courseList = res.rows
  })
  listDictItemByCode({typeCode: 'regionCode'}).then(res => {
    data.areaList = res.rows
  })
  listArticle({catalogCode: 'KAOSHILIUCHENG',publishedFlag: 1}).then(res => {
    data.articleList = res.rows
  })
}

const save = () => {
  proxy.$refs["examFlowFormRef"].validate(valid => {
    if (valid) {
      if (isAdd.value) {
        addExamFlow(form).then(res => {
          if (res.code === 200) {
            clearForm()
            ElMessage.success('新增成功');
          }
        })
      } else {
        editExamFlow(form).then(res => {
          if (res.code === 200) {
            ElMessage.success('修改成功');
          }
        })
      }
    }
  })
}
function goBack() {
  proxy.$tab.closeOpenPage();
  router.go(-1)
}
function clearForm() {
  Object.keys(form).forEach((key)=>{
    form[key] = ''
  })
  form.publishedFlag = 1
}

onMounted(() => {
  let titleMap = {
    add: '新增',
    edit: '修改',
  }
  routeQuery.type ? title.value = titleMap[routeQuery.type] : ''
  routeQuery.type == 'edit' ? initDetail(route.query) : ''
  isAdd.value = routeQuery.type == 'add'
  initData()
})
</script>
